<template>
    <el-carousel height="500px" :interval="5000" arrow="always">
        <el-carousel-item v-for="(slide, index) in slides" :key="index">
            <div class="carousel-item">
                <img :src="slide.image" :alt="slide.alt" />
                <div class="overlay"></div>
                <div class="content">
                    <div :class="['text-block', { 'text-right': slide.align === 'right' }]">
                        <h1 class="hero-title">{{ slide.title }}</h1>
                        <p class="hero-subtitle">{{ slide.subtitle }}</p>
                        <div class="btns" :class="{ 'right': slide.align === 'right' }">
                            <a v-for="(button, i) in slide.buttons" :key="i" href="javascript:void(0);" :class="button.class">{{ button.text }}</a>
                        </div>
                    </div>
                </div>
            </div>
        </el-carousel-item>
    </el-carousel>
</template>

<script setup>
    import { ref } from "vue";

    const slides = ref([
        {
            image: "/src/assets/images/9a74e9d266a3f3a3fc46e049fd720a21.png",
            alt: "养老院活动",
            title: "专业照护，温暖如家",
            subtitle: "我们提供全方位的养老服务，让每一位老人都能享受幸福晚年",
            align: "left",
            buttons: [
                { text: "了解更多", class: "btn-primary" },
                { text: "预约参观", class: "btn-outline" },
            ],
        },
        {
            image: "/src/assets/images/7eb3dda35d6b4a9b8dfb943379a8eaa9.png",
            alt: "医疗服务",
            title: "专业医疗，健康保障",
            subtitle: "24小时医疗监护，定期健康检查，为老人健康保驾护航",
            align: "right",
            buttons: [
                { text: "医疗服务", class: "btn-primary" },
                { text: "健康档案", class: "btn-outline" },
            ],
        },
        {
            image: "/src/assets/images/5cf9b425cb9640bcd508f926db0604e4.png",
            alt: "文娱活动",
            title: "丰富活动，快乐生活",
            subtitle: "多样化文娱活动，充实精神生活，让每一天都充满乐趣",
            align: "left",
            buttons: [
                { text: "活动安排", class: "btn-primary" },
                { text: "照片集锦", class: "btn-outline" },
            ],
        },
    ]);
</script>

<style scoped>
 .carousel-item { position: relative; width: 100%; height: 100%; }
 .carousel-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
 .overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); }
 .content { position: absolute; inset: 0; display: flex; align-items: center; }
 .text-block { max-width: 680px; color: #fff; margin-left: 48px; }
 .text-block.text-right { margin-left: auto; margin-right: 48px; text-align: right; }
 .hero-title { font-size: clamp(32px, 5vw, 56px); font-weight: 800; line-height: 1.15; text-shadow: 0 2px 6px rgba(0,0,0,0.5); margin: 0 0 16px; }
 .hero-subtitle { font-size: clamp(16px, 2.2vw, 20px); text-shadow: 0 2px 6px rgba(0,0,0,0.35); margin: 0 0 24px; }
 .btns { display: flex; gap: 12px; }
 .btns.right { justify-content: flex-end; }
</style>
